(function () {
    'use strict';
    // 建立模态框对象
    var modalBox = {};
    // 获取模态框
    modalBox.modal = document.getElementById("myModal");
    modalBox.modalpic = document.getElementById("myModalpic");
    // 获得按钮
    modalBox.triggerBtn = document.getElementById("triggerBtn");
    modalBox.triggerBtnpic = document.getElementById('triggerBtnpic')
    // 获得关闭按钮
    modalBox.closeBtn = document.getElementById("closeBtn");
    modalBox.closeBtnpic = document.getElementById("closeBtnpic");
    // 获取查询按钮和选择框
    var queryBtnPic = document.querySelector('.querypic .button');
    var roadSelect = document.querySelector('#myModalpic select[name="name"]');

    // 预定义每个路段的图片路径
    const roadPictures = {
        '南公园西路': [
            './img/pic/南公园西路/1.png',
            './img/pic/南公园西路/2.png',
            './img/pic/南公园西路/3.png',
            './img/pic/南公园西路/4.png',
            './img/pic/南公园西路/5.png',
            './img/pic/南公园西路/6.png',
            './img/pic/南公园西路/7.png',
            './img/pic/南公园西路/8.png'
        ],
        '文化西路': [
            './img/pic/文化西路/1.png',
            './img/pic/文化西路/2.png',
            './img/pic/文化西路/3.png',
            './img/pic/文化西路/4.png',
            './img/pic/文化西路/5.png',
            './img/pic/文化西路/6.png',
            './img/pic/文化西路/7.png',
            './img/pic/文化西路/8.png'
        ],
        '北京南路': [
            './img/pic/北京南路/1.png',
            './img/pic/北京南路/2.png',
            './img/pic/北京南路/3.png',
            './img/pic/北京南路/4.png',
            './img/pic/北京南路/5.png',
            './img/pic/北京南路/6.png',
            './img/pic/北京南路/7.png',
            './img/pic/北京南路/8.png'
        ],
        '中坪西路': [
            './img/pic/中坪西路/1.png',
            './img/pic/中坪西路/2.png',
            './img/pic/中坪西路/3.png',
            './img/pic/中坪西路/4.png',
            './img/pic/中坪西路/5.png',
            './img/pic/中坪西路/6.png',
            './img/pic/中坪西路/7.png',
            './img/pic/中坪西路/8.png'
        ]
    };

    // 模态框显示
    modalBox.show = function () {
        $("#data-content-line").load(location.href + "#data-content-line");
        this.modal.style.display = "block";
    }
    
    modalBox.showpic = function () {
        this.modalpic.style.display = "block";
        // 获取当前选中的路段并显示图片
        const selectedRoad = roadSelect.value;
        if (selectedRoad) {
            updatePictures(selectedRoad);
        }
    }
    
    // 模态框关闭
    modalBox.close = function () {
        this.modal.style.display = "none";
    }
    
    modalBox.closepic = function () {
        this.modalpic.style.display = "none";
    }

    // 随机打乱数组
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    // 更新图片显示
    function updatePictures(selectedRoad) {
        console.log('选中的路段:', selectedRoad);
        
        // 获取图片容器
        const picContainer = document.querySelector('.data-contentpic');
        if (!picContainer) {
            console.error('Picture container not found!');
            return;
        }
        
        // 获取选定路段的图片数组
        const pics = roadPictures[selectedRoad];
        console.log('找到的图片路径:', pics);
        
        if (!pics) {
            console.error('No pictures found for:', selectedRoad);
            return;
        }

        // 随机打乱图片顺序
        const shuffledPics = shuffleArray([...pics]);
        console.log('打乱后的图片路径:', shuffledPics);
        
        // 清空现有图片
        picContainer.innerHTML = '';

        // 添加新的图片
        shuffledPics.forEach((picPath, index) => {
            console.log(`添加第 ${index + 1} 张图片:`, picPath);
            const picDiv = document.createElement('div');
            picDiv.className = 'date-content-pic fl';
            
            const img = document.createElement('img');
            img.src = picPath;
            img.alt = '监控截图';
            
            // 添加图片加载错误处理
            img.onerror = function() {
                console.error('Failed to load image:', picPath);
                this.src = './img/error.jpg';
            };
            
            picDiv.appendChild(img);
            picContainer.appendChild(picDiv);
        });
    }

    // 模态框初始化
    modalBox.init = function () {
        var that = this;
        
        // 显示模态框事件
        this.triggerBtn.onclick = function () {
            that.show();
        }
        
        this.triggerBtnpic.onclick = function () {
            that.showpic();
        }
        
        // 关闭模态框事件
        this.closeBtn.onclick = function () {
            that.close();
        }
        
        this.closeBtnpic.onclick = function () {
            that.closepic();
        }

        // 查询按钮点击事件
        queryBtnPic.onclick = function() {
            var selectedRoad = roadSelect.value;
            if (!selectedRoad) {
                alert('请选择站点');
                return;
            }
            updatePictures(selectedRoad);
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            if (event.target == that.modal) {
                that.close();
            }
            if (event.target == that.modalpic) {
                that.closepic();
            }
        }
    }

    modalBox.init();
})();